<script setup lang="ts">
import { defineAsyncComponent, shallowRef } from 'vue';
import { storeToRefs } from 'pinia';
import useThemeConfig from '@/stores/themeConfig';

const stores = useThemeConfig();
const { themeConfig } = storeToRefs(stores);

// 用户名登录
const Account = defineAsyncComponent(() => import('../account/index.vue'));

// 默认展示
const state = shallowRef({
	key: 'account',
	component: Account,
});

// tabs 实例对象
const tabsComponent = [
	{
		key: 'account',
		label: '用户名登录',
		component: Account,
	},
];
</script>

<template>
	<div class="login-right">
		<div class="login-title">{{ themeConfig.globalTitle }} 欢迎您！</div>
		<el-tabs v-model="state.key">
			<el-tab-pane v-for="cpn in tabsComponent" :key="cpn.key" :label="cpn.label" :name="cpn.key">
				<component :is="state.component" v-if="cpn.key === state.key" />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
